<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我要写信 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/aj-captcha/css/verify.css"
    />
    <script src="${resource}/static/plugins/crypto-js/crypto-js.min.js"></script>
    <script src="${resource}/static/plugins/sm-crypto/dist/sm2.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/crypto-js.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/ase.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/verify.js"></script>
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="container">
      <div class="row">
      <!--左侧--->
      [#include '../includes/inc_letter_left.html'/]
      <!--右侧--->
        <div class="col-9 content-area p-5">
            <!-- 主内容区 -->
            <div class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6">
              <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                  <hidden id="fields-config"></hidden>
                  <div class="lg:col-span-4 space-y-6">
                      <!-- 渲染的表单 -->
                      <div class="bg-white rounded-lg shadow-sm card-shadow overflow-hidden" id="rendered-form-container">
                          <form id="rendered-form"  action="${api}/letter" class="bg-light p-3 mb-3">
                              <!-- 表单内容将通过JS动态生成 -->
                              <div class="text-center text-dark-2 py-16" id="form-placeholder">
                                  <i class="fa fa-code text-4xl mb-3 block opacity-30"></i>
                                  <p>请配置领导信箱的模型生成表单</p>
                              </div>
                              <div class="border-t border-light-2 pt-5 hidden" id="form-actions">
                                  <button type="button" id="letterSubmit" class="btn btn-primary">
                                       提交
                                  </button>
                                  <button type="reset" class="btn btn-secondary">
                                      <i class="fa fa-refresh mr-1"></i> 重置
                                  </button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
            </div>

            <!-- 图形验证码容器和参数 -->
            <div id="captcha-containerId"></div>
            <input
              type="hidden"
              name="captchaVerification"
              id="captchaVerification"
            />
        </div>
      </div>
    </div>
    [#include '../includes/footer.html'/] 
    [#include '../includes/inc_msg.html'/]
    [#include '../includes/inc_letter_valid_msg.html'/]
    <script src="${resource}/static/js/letter.js"></script>
    <script>
      //绑定提交事件
      //document.addEventListener('DOMContentLoaded', initApp);
      $(async function() {
        let letterConfig
        await axios.get(`${api}/letter/config`).then(function (response) {
          letterConfig = response.data.data
        })
        //获取信件模型数据
        getLetterForm(`${api}`,letterConfig)
        let openCaptchaVerificate = letterConfig.openCaptchaVerificate
        //验证码
        if(openCaptchaVerificate){
          $("#captcha-containerId").slideVerify({
            baseUrl: "${base}", //服务器请求地址;
            containerId: "letterSubmit", //pop模式 必填 被点击之后出现行为验证码的元素id
            mode: "pop", //展示模式
            imgSize: {
              //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
              width: "400px",
              height: "200px",
            },
            barSize: {
              //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
              width: "400px",
              height: "40px",
            },
            beforeCheck: function () {
              //检验参数合法性的函数  mode ="pop"有效
              let flag = true;
              //实现: 参数合法性的判断逻辑, 返回一个boolean值
              return flag;
            },
            ready: function () {}, //加载完毕的回调
            success: function (params) {
              //成功的回调
              // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
              //例如: login($.extend({}, params))
              const captchaVerificationHidden = document.getElementById('captchaVerification');
              captchaVerificationHidden.value = params.captchaVerification;
              handleFormSubmit()
            },
            error: function () {
              alertTip("验证码错误");
            }, //失败的回调
          });
        }else{
          $("#letterSubmit").click( function () { handleFormSubmit()})
        }
      });
    </script>
  </body>
</html>
[/#escape]
